<template>
  <span :class="[props.color,'tag']">
    {{ props.text }}
  </span>
</template>
<script setup lang="ts">
import { defineProps } from "vue";
const props = defineProps({
  text: {
    type: String,
    default: "",
  },
  color:{
      type: String,
    default: "green",
  }
});
</script>
<style scoped>
.tag {
  font-size: 0.8rem;
  padding: 2px 5px;

  border-radius: 5px;
  font-weight: 500;
}
.green {
  background-color: #e0fef4;
  color: #8bb1a8;
  border: 1px solid #d3e8e1;
}
.yellow{
      background-color: #ffefe0;
  color: #f39981;
  border: 1px solid #e0cabf;
}
</style>
